<template>
    <sub-box>
        <div class="details white-block">
            <div class="text-right">
                <el-button size="small" @click="closeDetails">返回</el-button>
            </div>
            <!--            <div class="toolbar">-->
            <!--                <el-button class="mr10" :type="btn" @click="serRequest">服务请求详情</el-button>-->

            <!--                <el-button class="mr10" :type="btn1" @click="atomicSerRequest">原子服务调用信息</el-button>-->
            <!--            </div>-->
            <el-tabs v-model="activeName">
                <el-tab-pane label="服务请求详情" name="first">
                    <div class="detailsBox" v-for="item in detailsMsg" :key="item.id">

                        <div class="detailsMsg mt30">
                            <el-row>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>请求流水号：</span>
                                    <p>{{item.reqid}}</p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>消费者系统名称：</span>
                                    <p>
                                        {{item.systemName}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>消费者IP：</span>
                                    <p>
                                        {{item.requestip}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>服务名称：</span>
                                    <p>
                                        {{item.servname}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>服务编码：</span>
                                    <p>
                                        {{item.servcode}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>请求时间：</span>
                                    <p>
                                        {{item.requestTime}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>返回时间：</span>
                                    <p>
                                        {{item.responseTime}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>耗时(MS)：</span>
                                    <p>
                                        {{item.takeTime}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>请求状态：</span>
                                    <p v-if="item.status ==='成功'" class="success">
                                        {{item.status}}
                                    </p>
                                    <p v-else class="error">
                                        {{item.status}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>服务平台：</span>
                                    <p>
                                        {{item.appname}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>请求包大小(B)：</span>
                                    <p>
                                        {{item.reqlength}}
                                    </p>
                                </el-col>
                                <el-col :xl="8" :md="12" :sm="12">
                                    <span>返回包大小(B)：</span>
                                    <p>
                                        {{item.resplength}}
                                    </p>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="serConsumeMsg mt30">
                            <div class="toolbar">
                                <breadcrumb :title="'querystring(get请求的入参)'"></breadcrumb>
                            </div>
                            <div class="requestMsg1">{{item.querystring}}</div>

                        </div>
                        <div class="serConsumeMsg mt30">
                            <div class="toolbar">
                                <breadcrumb :title="'请求报文'"></breadcrumb>
                            </div>
                            <div class="requestMsg">{{item.insoapmsg}}</div>

                        </div>
                        <div class="serConsumeMsg mt30">
                            <div class="toolbar">
                                <breadcrumb :title="'返回报文'"></breadcrumb>
                            </div>
                            <div class="requestMsg">{{item.outsoapmsg}}</div>

                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="原子服务调用信息" name="second">
                    <div class="atomicMsg">
                        <table-example :data="atomicData" :tableColumn="atomicDataHeader"
                                       class="mt20">
                        </table-example>
                        <div class="serConsumeMsg mt30">
                            <div class="toolbar">
                                <breadcrumb :title="'请求报文'"></breadcrumb>
                            </div>
                            <div class="requestMsg">{{atomiinscRequest}}</div>
                        </div>
                        <div class="serConsumeMsg mt30">
                            <div class="toolbar">
                                <breadcrumb :title="'返回报文'"></breadcrumb>
                            </div>
                            <div class="requestMsg">{{atomioutcRequest}}</div>
                        </div>
                        <!--                <table-example :data="atomicRequest" :tableColumn="atomicReqHeader"-->
                        <!--                               class="mt30">-->
                        <!--                </table-example>-->
                    </div>
                </el-tab-pane>
            </el-tabs>

        </div>
    </sub-box>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'
    import subBox from '../../components/layout/layout-sub'

    export default {
        data() {
            return {
                activeName: 'first',
                atomicData: null, // 原子服务调用信息表格
                atomicDataHeader: [
                    {
                        prop: 'appname',
                        label: '服务器',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'atomserviceName',
                        label: '原子服务名',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'atomserviceCode',
                        label: '原子服务编码',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'adapterType',
                        label: '适配类型',
                        minWidth: '10%',
                        align: 'center'
                    },
                    {
                        prop: 'requestTime',
                        label: '开始时间',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'responseTime',
                        label: '结束时间',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'takeTime',
                        label: '耗时(MS)',
                        minWidth: '10%',
                        align: 'center'
                    },
                    {
                        prop: 'status',
                        label: '处理状态',
                        minWidth: '10%',
                        align: 'center'
                    }
                ],
                atomiinscRequest: null, // 原子服务调用信息第二表格
                atomioutcRequest: null,
                serverDetails: true,
                atomicSer: false,
                btn: 'primary', // 按钮颜色切换
                btn1: '',
                queryMsg: {},
                id: '',
                detailsMsg: null,
                reqid: ''
            }
        },
        mounted() {
            // if (this.$route.query.id) this.id = this.$route.query.id
            // if (this.$route.query.reqid) this.reqid = this.$route.query.reqid
            this.getData()
        },
        methods: {
            getData1() {
                this.$http.get('/EsbLogReq/selectDetailedMsg', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.detailsMsg = result.data
                    }
                })

                this.$http.get('/EsbAtomlogReq/selectDetailedMsg', {
                    reqid: this.reqid
                }).then(result => {
                    if (result.success) {
                        this.atomicData = result.data
                        this.atomiinscRequest = result.data[0].insoapmsg
                        this.atomioutcRequest = result.data[0].outsoapmsg
                    }
                })
            },

            // 点击服务请求详情
            serRequest() {
                this.serverDetails = true
                this.atomicSer = false
                this.btn = 'primary'
                this.btn1 = ''
            },
            // 点击原子服务调用信息
            atomicSerRequest() {
                this.serverDetails = false
                this.atomicSer = true
                this.btn = ''
                this.btn1 = 'primary'

            },

            // 关闭详情
            closeDetails() {
                this.$router.push({
                    path: '/logQuery'
                })
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb,
            subBox
        }
    }
</script>
<style scoped lang="less">
    .details {
        width: 100%;
        position: relative;

        .el-button.el-button--small {
            font-size: .12rem;
        }

        .icon {
            i {
                font-size: .3rem;
                position: absolute;
                right: -10px;
                top: -10px;
                color: #999;
            }
        }

        .detailsBox {
            height: 100%;
            margin-top: .2rem;
            /*background-color: pink;*/

            .serAllocation {
                /*margin-top: .2rem;*/
            }

            .btn {
                margin-right: 1rem;
            }

            .detailsMsg {
                font-size: .16rem;

                span {
                    color: #999;
                    width: 1.5rem;
                    display: inline-block;
                    text-align: right;
                }

                p {
                    display: inline-block;
                    line-height: .5rem;
                }

                .success {
                    color: #00B019;
                }

                .error {
                    color: red;
                }
            }

            .serConsumeMsg {
                .requestMsg {
                    width: 12rem;
                    height: 2rem;
                    font-size: .16rem;
                    border: 1px solid #E5E5E5;
                    padding: .1rem;
                    word-wrap: break-word;
                    word-break: break-all;
                    overflow-y: auto;
                    overflow-x: hidden;
                }

                .requestMsg1 {
                    width: 12rem;
                    height: .5rem;
                    font-size: .16rem;
                    border: 1px solid #E5E5E5;
                    padding: .1rem;
                }
            }

            .deployBox {
                width: 100%;

                li {
                    background-color: #eee;
                    display: inline-block;
                    height: 3rem;
                    width: 25%;
                    margin-right: .3rem;
                    margin-bottom: .3rem;
                    margin-left: .5rem;
                    text-align: center;

                    .img {
                        width: 1rem;
                        height: 1.15rem;
                        background-color: pink;
                        margin-left: 37%;
                        margin-top: .5rem;
                    }

                    span {
                        display: inline-block;
                        margin-top: .3rem;
                    }
                }
            }
        }

        .atomicMsg {
            .serConsumeMsg {
                .requestMsg {
                    width: 100%;
                    height: 2rem;
                    font-size: .16rem;
                    border: 1px solid #E5E5E5;
                    padding: .1rem;
                    word-wrap: break-word;
                    word-break: break-all;
                    overflow-y: auto;
                    overflow-x: hidden;
                }
            }
        }
    }
</style>
